<template>
	<view class="content">
		<view class="flex">
			<view @click="dds(item.name)" class="flex-item" v-for="(item, index) in testList" :key="index">{{item.name}}</view>
		</view>
		<view class="sitting">
			<view class="speed">
				<view>速度：</view><input type="number" v-model="speed" style="display: inline-block;"><view>s</view>
			</view>
			<view class="ishard">
				高级：<label class="radio"><radio v-model="ishard" checked= /></radio></label>
			</view>
		</view>
		<view>你的分数：{{num}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				testList: [{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
					{
						name: '我是假地鼠'
					},
				],
				num: 0,
				hasClick: 0,
				speed: 2,
				ishard: 1

			}
		},
		
		onLoad() {
			
			// this.testList.forEach((item) => {
			// 	item.name = '';
			// })
			let that = this;
			var a = setInterval(() => {
				let i = parseInt((Math.random() * 25) - 1);
				console.log(i);
				console.log(that.testList[i]['name']);
				let name = that.testList[i]['name'];
				that.testList[i]['name'] = '我是地鼠'
				setTimeout(() => {
					if (this.hasClick == 1) {
						that.testList[i]['name'] = name
						this.hasClick = 0;
					} else {
						uni.showModal({
							title: '你真菜'
						})
						this.num = 0;
						clearInterval(a)
					}

				}, 1950);
			}, 2000);
		},
		methods: {
			dds: function(name) {
				if (name == '我是地鼠') {
					this.num++;
					this.hasClick = 1
				} else {
					uni.showModal({
						title: '你真菜'
					})
					this.num = 0

				}
			}
		}
	}
</script>

<style lang="less">
	.content {
		text-align: center;
		height: 400upx;
	}

	.flex {
		display: flex;
		flex-flow: inherit;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-around;
		background: #007AFF;
	}

	.flex-item {
		width: 150upx;
		font-size: 24upx;
		animation: myanimation 2s infinite;
		height: 150upx;
		line-height: 150upx;
		display: inline-block;
		background: #ffffff;
		align-items: center;
	}

	@keyframes myanimation {
		0% {
			border-radius: 0upx;
		}

		50% {
			border-radius: 75upx;
		}

		100% {
			border-radius: 0upx;
		}
	}

	.speed {
		display: flex;
		justify-content: center;

		view input {
			height: 30upx;
			line-height: 30upx;
		}

		input {
			width: 100upx;
		}
	}
</style>
